<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闭包的使用逻辑</title>
</head>
<body>
    <ul>
        <li class="J_Li">1</li>
        <li class="J_Li">2</li>
        <li class="J_Li">3</li>
        <li class="J_Li">4</li>
        <li class="J_Li">5</li>
    </ul>
</body>
</html>
<script>
// 递增ID， 防抖，节流
(() => {
    /* 目的1 封印 */
    var liElems = document.querySelectorAll('.J_Li');
    for(var i = 0; i<liElems.length; i++){
        ((i)=>{
            liElems[i].addEventListener('click', () => {
                console.log(i);
            }, false);
        })(i);
    }
    /* 目的2 掌控 */
    const cacheControl = (() => {
        var valMap = {};
        return {
            get: (key) => {
                return valMap[key];
            },
            set: (key, val) => {
                return valMap[key] = val;
            }
        };
    })();
})();
</script>